<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home Page</title>
    <style>
        /* 添加必要的样式 */
body{
margin:0;
}
        view {
            display: block;
        }
        image {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <view style="background:repeating-linear-gradient(to right,#d9edff,#EFECE7);">
        <!-- 头部模块 -->
        <view style="width: 100vw;position: relative;">
            <!-- 背景图 -->
            <image style="width: 100vw;padding-top: 60px;" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/房子.png" mode="widthFix" />
            <!-- 信息块 -->
            <view style="position: absolute;top: 0;bottom: 0;left: 0;right: 0;">
                <!-- 个人信息 -->
                <view style="display: flex;align-items: center;padding-top: 60px;">
                    <image style="width: 8vw;margin-left:20px;" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/我的图标.png" mode="widthFix" />
                    <view style="margin-left:10px;font-size: 5vw;">我的</view>
                </view>
                <!-- 图标按钮 -->
                <view>
                    <view style="position: absolute;top: 37vw;bottom: 0;left: 16vw;right: 0;">
                        <image style="width: 9vw;" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/气.png" mode="widthFix" />
                    </view>
                    <view style="position: absolute;top: 41vw;bottom: 0;left: 36vw;right: 0;">
                        <image style="width: 9vw;" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/电.png" mode="widthFix" />
                    </view>
                    <view style="position: absolute;top: 48vw;bottom: 0;left: 76vw;right: 0;">
                        <image style="width: 9vw;" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/视频监控.png" mode="widthFix" />
                    </view>
                    <view style="position: absolute;top: 65vw;bottom: 0;left: 5vw;right: 0;">
                        <image style="width: 9vw;" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/水.png" mode="widthFix" />
                    </view>
                    <view style="position: absolute;top: 80vw;bottom: 0;left: 61vw;right: 0;">
                        <image style="width: 18vw;" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/老年人.png" mode="widthFix" />
                    </view>
                    <view style="position: absolute;top: 98vw;bottom: 0;left: 80vw;right: 0;">
<view style="width: 16vw;position: relative;">
                        <image style="width:100%;" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/老人在家图标.png" mode="widthFix"></image>
                            <view style="position: absolute;top: 0;bottom: 0;left:0;right: 8px;display: flex;justify-content: flex-end;align-items: center;font-size: 9px;">
                                在家
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 底部卡片 -->
        <view style="width: 100%;margin-top:-90px ;position: relative;z-index: 1;">
            <!-- 卡片背景图 -->
            <image style="width: 100%;position: relative;" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/底部.png" mode="widthFix"/>
                <!-- 卡片内容 -->
                <view style="position: absolute;top: 0;bottom: 0;left: 0;right: 0;display: flex;flex-direction: column;align-items: center;margin: 10px;">
                    <!-- 卡片头部 -->
                    <view style="width: 90%;height: 20%;display: flex;margin-bottom: 10px;">
                        <!-- 左侧 -->
                        <view style=" margin-left: 10px;display: flex;flex-direction: column;justify-content: center;height: 100%;width: 74%;">
                            <view style="display: flex;margin-top:5px;">
                                <image style="width: 30px;" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/家庭图标.png" mode="widthFix" />
                                <view style="font-size: 20px;color: white;font-weight: bold;margin-left: 10px;margin-top: auto;">家庭状况</view>
                            </view>
                            <view style="display: flex;margin-top:5px;">
                                <view style="color: white;font-weight: bold;font-size: 12px;">
                                    <text>安全评级：</text>
                                    <text style="color:#A2D8C0 ;">优秀</text>
                                    <text style="font-weight: 100;">（水电气无异常报警）</text>
                                </view>
                            </view>
                            <view style="display: flex;margin-top:5px;">
                                <view style="color: white;font-weight: bold;font-size: 12px;">
                                    <text>老人身体情况：</text>
                                    <text style="color:#fc5724 ;">良好</text>
                                    <text style="font-weight: 100;">（心率偏低，血糖略高）</text>
                                </view>
                            </view>
                        </view>
                        <!-- 右侧 -->
                        <view style="flex: 1;display: flex;align-items: center;justify-content: center;">
                            <view style="font-size: 30px;font-weight: bold;">96</view>
                        </view>
                    </view>
                    <!-- 卡片中部 -->
                    <view style="width: 90%;">
                        <!-- 实时健康监测 -->
                        <view>
                            <view style="font-weight: bold;">实时健康监测</view>
                            <!-- 数据展示 -->
                            <view style="display: flex;">
                                <!-- 心率 -->
                                <view style="display: flex;flex-direction: column;align-items: center;width: 106px;">
                                    <view style="width: 100%;background-image: url('https://www.ruanzi.net/jy/wxuser/103/images/pages/色环图标.png');background-size: contain;background-repeat: no-repeat;display: flex;justify-content: center;position: relative;">
                                        <image style="width: 30px;position: absolute;left:10px;top:12px" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/偏低图标.png" mode="widthFix"></image>
                                        <view style="width: 75%;margin-top: 10px;;display: flex;flex-direction: column;align-items: center;">
                                            <image style="width: 22px;margin-top: 30px;" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/心率.png" mode="widthFix" />
                                            <view style="color: #FF5340;height: 30px;display: flex;align-items: center;">
                                                <text style="font-size: 22px;">30</text><text style="font-size: 10px;">次/分</text>
                                            </view>
                                            <view style="font-size: 10px;">60-100次/分</view>
                                            <view style="color: #E35D00;font-size: 14px;font-weight: bold;">心率偏低</view>
                                            <view style="font-size: 10px;text-align: center;">观察是否头晕，不适请就医。</view>
                                        </view>
                                    </view>
                                </view>
                                <!-- 血糖 -->
                                <view style="display: flex;flex-direction: column;align-items: center;width: 106px;">
                                    <view style="width: 100%;background-image: url('https://www.ruanzi.net/jy/wxuser/103/images/pages/色环图标.png');background-size: contain;background-repeat: no-repeat;display: flex;justify-content: center;position: relative;">
                                        <image style="width: 30px;position: absolute;right:10px;top:22px" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/偏高图标.png" mode="widthFix"></image>
                                        <view style="width: 75%;margin-top: 10px;;display: flex;flex-direction: column;align-items: center;">
                                            <image style="width: 22px;margin-top: 30px;" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/血糖.png" mode="widthFix" />
                                            <view style="color: #FE8B00;height: 30px;display: flex;align-items: center;">
                                                <text style="font-size: 22px;">7.8</text><text style="font-size: 7px;">mmol/L</text>
                                            </view>
                                            <view style="font-size: 10px;">3.9-7.8mmol/L</view>
                                            <view style="color: #D92400;font-size: 14px;font-weight: bold;">血糖略高</view>
                                            <view style="font-size: 10px;text-align: center;">建议减少主食，多吃蔬菜。</view>
                                        </view>
                                    </view>
                                </view>
                                <!-- 血压 -->
                                <view style="display: flex;flex-direction: column;align-items: center;width: 106px;">
                                    <view style="width: 100%;background-image: url('https://www.ruanzi.net/jy/wxuser/103/images/pages/色环图标.png');background-size: contain;background-repeat: no-repeat;display: flex;justify-content: center;position: relative;">
                                        <image style="width: 30px;position: absolute;top:5px" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/正常图标.png" mode="widthFix"></image>
                                        <view style="width: 75%;margin-top: 10px;;display: flex;flex-direction: column;align-items: center;">
                                            <image style="width: 22px;margin-top: 30px;" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/血压.png" mode="widthFix" />
                                            <view style="color: #E35D00;height: 30px;display: flex;align-items: center;">
                                                <text style="font-size: 16px;">130/85</text>
                                            </view>
                                            <view style="font-size: 10px;">＜140/90mmHg</view>
                                            <view style="color: #299A0C;font-size: 14px;font-weight: bold;">血压正常</view>
                                            <view style="font-size: 10px;text-align: center;">注意少盐。</view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <!-- 今日水电趋势 -->
                        <view style="margin-top: 5px;">
                            <view style="font-weight: bold;">今日水电趋势</view>
                            <!-- 数据展示 -->
                            <view style="display: flex;">
                                <!-- 左侧卡片 -->
                                <view style="width: 50%;display:flex;flex-direction: column;align-items: center;">
                                    <view style="font-size: 10px;">今日用电</view>
                                    <!-- 卡片 -->
<view style="width:90%;position: relative;">
<image style="width:100%;" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/底2.png" mode="widthFix"/>
                                        <view style="position: absolute;top: 0;bottom: 0;left: 0;right: 0;display: flex;align-items: center;">
                                            <view style="margin-left: 10px;height: 70%;color: white;font-size: 10px;display: flex;flex-direction: column;justify-content: space-around;">
                                                <view style="">比昨日同时</view>
                                                <view style="margin-left: 10px;display: flex;">
                                                    <image style="width: 25%;" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/上1.png" mode="widthFix"></image>
                                                    <text style="font-weight: bold;">0.8kwh</text>
                                                </view>
                                                <view style="">
                                                    <text style="font-size: 8px;">预计今日为</text>
                                                    <text style="font-weight: bold;">8kwh</text>
                                                </view>
                                            </view>

                                           <view style="width: 45%;position: absolute;top: 10%;right: 0;">
                      <image style="width: 100%;" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/图标.png"
                        mode="widthFix" />
                      <view style="position: absolute;top: 0;bottom: 0;left: 0;right: 0;">
                        <view
                          style="width: 100%;height:100%;display: flex;justify-content: center;align-items: center;">
                          <view>
                            <text style="font-size: 20px;color: white;">5.6</text>
                            <text style="font-size: 6px;color: white;margin-top: auto;">kwh</text>
                          </view>
                        </view>
                      </view>
                    </view>
                                        </view>
</view>

                                    



                                </view>
                                <!-- 右侧卡片 -->
                                <view style="width: 50%;display:flex;flex-direction: column;align-items: center;">
                <view style="font-size: 10px;">
                  今日用水
                </view>
                <!-- 卡片 -->
                <view style="width:90%;position: relative;">
                  <image style="width:100%;" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/底2.png"
                    mode="widthFix" />

                  <view style="position: absolute;top: 0;bottom: 0;left: 0;right: 0;display: flex;align-items: center;">
                    <view
                      style="margin-left: 10px;height: 70%;color: white;font-size: 10px;display: flex;flex-direction: column;justify-content: space-around;">
                      <view style="">
                        比昨日同时
                      </view>
                      <view style="margin-left: 10px;display: flex;">
                        <image style="width: 25%;" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/下1.png"
                          mode="widthFix"></image>
                        <text style="font-weight: bold;">32L</text>
                      </view>
                      <view style="">
                        <text style="font-size: 8px;">预计今日为</text>
                        <text style="font-weight: bold;">531L</text>
                      </view>
                    </view>
                    <view style="width: 45%;position: absolute;top: 10%;right: 0;">
                      <image style="width: 100%;" src="https://www.ruanzi.net/jy/wxuser/103/images/pages/图标.png"
                        mode="widthFix" />
                      <view style="position: absolute;top: 0;bottom: 0;left: 0;right: 0;">
                        <view
                          style="width: 100%;height:100%;display: flex;justify-content: center;align-items: center;">
                          <view>
                            <text style="font-size: 18px;color: white;">325</text>
                            <text style="font-size: 11px;color: white;margin-top: auto;">L</text>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
              </view>
            </view>

            <!-- 智能建议 -->
            <view style="margin-top: 5px;">
              <view style="font-size: 11px;font-weight: bold;">
                智能建议
              </view>
              <view style="font-size: 11px;color: #555557;">
                <text>1.错峰节能：中午12-14点使用洗衣/洗碗机（省电+自然晾晒）</text>
                <text>2.随手断电：睡前关闭路由器、机顶盒（年省200元）</text>
                <text>3.异常警报：今晚用电峰值过高（2kWh），请检查空调是否低于26℃或忘记关大功率电器。</text>
              </view>
            </view>
          </view>
        </view>
      
    </view>
  </view>
</body>